<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap-show-modal</title>
    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="./node_modules/prismjs/themes/prism-tomorrow.css"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <style type="text/css">
        button {
            margin-bottom: 0.5em;
        }
    </style>
</head>
<body>
<section class="container pt-5">
    <h1>bootstrap-show-modal</h1>
    <p class="mb-3">
        A jQuery plugin wrapper around Bootstrap 4 modals, to create modals dynamically in JavaScript.
    </p>
    <p><a href="https://github.com/shaack/bootstrap-show-modal">GitHub repository and documentation</a></p>
</section>
<section class="container">
    <h2>Examples</h2>
    <div class="pb-2">
        <h3>Hello World!</h3>
        <pre><code class="language-javascript">$.showModal({title: "Hello World!", body: "A very simple modal dialog without buttons."})</code></pre>
        <button type="button" id="button-hello-world" class="btn btn-primary">Hello World!</button>
    </div>
    <div class="pb-2">
        <h3>Alert (With "OK" Button)</h3>
        <pre><code class="language-javascript">$.showAlert({title: "Hi", body: "Please press ok, if you like or dislike cookies."})</code></pre>
        <button type="button" id="button-alert" class="btn btn-primary">Show Alert</button>
    </div>
    <div class="pb-2">
        <h3>Confirmation dialog</h3>
        <pre><code class="language-javascript">$.showConfirm({
    title: "Please confirm", body: "Do you like cats?", textTrue: "Yes", textFalse: "No",
    onSubmit: function (result) {
        if (result) {
            $.showAlert({title: "Result: " + result, body: "You like cats."})
        } else {
            $.showAlert({title: "Result: " + result, body: "You don't like cats."})
        }
    },
    onDispose: function () {
        console.log("The confirm dialog vanished")
    }
})</code></pre>
        <button type="button" id="button-confirm" class="btn btn-primary">Show Confirm</button>
    </div>
    <div class="pb-2">
        <h3>Show a complex form and handle input</h3>
        <pre><code class="language-javascript">$.showModal({
    title: 'Complex Form',
    body:
        '&lt;form>&lt;div class="form-group row">' +
        '&lt;div class="col-3">&lt;label for="text" class="col-form-label">Text&lt;/label>&lt;/div>' +
        '&lt;div class="col-9">&lt;input type="text" class="form-control" id="text"/>&lt;/div>' +
        '&lt;/div>' +
        '&lt;div class="form-group row">' +
        '&lt;div class="col-3">&lt;label for="select" class="col-form-label">Select&lt;/label>&lt;/div>' +
        '&lt;div class="col-9">&lt;select id="select" class="form-control">' +
        '&lt;option value="">&lt;/option>' +
        '&lt;option value="red">red&lt;/option>&lt;option value="green">green&lt;/option>&lt;option value="blue">blue&lt;/option>' +
        '&lt;/select>&lt;/div>' +
        '&lt;/div>' +
        '&lt;div class="form-group row">' +
        '&lt;div class="col-3">&lt;label for="textarea" class="col-form-label">Textarea&lt;/label>&lt;/div>' +
        '&lt;div class="col-9">&lt;textarea id="textarea" rows="5" class="form-control">&lt;/textarea>&lt;/div>' +
        '&lt;/div>&lt;/form>',
    footer: '&lt;button type="button" class="btn btn-link" data-dismiss="modal">Cancel&lt;/button>&lt;button type="submit" class="btn btn-primary">Send&lt;/button>',
    onCreate: function (modal) {
        // create event handler for form submit and handle values
        $(modal.element).on("click", "button[type='submit']", function (event) {
            event.preventDefault()
            var $form = $(modal.element).find("form")
            $.showAlert({
                title: "Result",
                body:
                    "&lt;b>text:&lt;/b> " + $form.find("#text").val() + "&lt;br/>" +
                    "&lt;b>select:&lt;/b> " + $form.find("#select").val() + "&lt;br/>" +
                    "&lt;b>textarea:&lt;/b> " + $form.find("#textarea").val()
            })
            modal.hide()
        })
    }
})</code></pre>
        <button type="button" id="button-form" class="btn btn-primary">Show a complex Form</button>
    </div>

    <div class="card my-5 border-info">
        <a href="https://shaack.com/en/open-source-components">
            <div class="card-body">
                <h4 class="mb-2">More Bootstrap 4 Components (from shaack.com)</h4>
                You may want to check out our further Bootstrap 4 extensions.
            </div>
        </a>
    </div>

</section>

<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="src/bootstrap-show-modal.js"></script>
<script src="./node_modules/prismjs/prism.js"></script>
<script>
    document.getElementById("button-hello-world").addEventListener("click", function () {
        $.showModal({title: "Hello World!", body: "A very simple modal dialog without buttons."})
    })

    document.getElementById("button-alert").addEventListener("click", function () {
        $.showAlert({title: "Hi", body: "Please press ok, if you like or dislike cookies."})
    })

    document.getElementById("button-confirm").addEventListener("click", function () {
        $.showConfirm({
            title: "Please confirm", body: "Do you like cats?", textTrue: "Yes", textFalse: "No",
            onSubmit: function (result) {
                if (result) {
                    $.showAlert({title: "Result: " + result, body: "You like cats."})
                } else {
                    $.showAlert({title: "Result: " + result, body: "You don't like cats."})
                }
            },
            onDispose: function () {
                console.log("The confirm dialog vanished")
            }
        })
    })

    document.getElementById("button-form").addEventListener("click", function () {
        $.showModal({
            title: 'Complex Form',
            body:
                '<form><div class="form-group row">' +
                '<div class="col-3"><label for="text" class="col-form-label">Text</label></div>' +
                '<div class="col-9"><input type="text" class="form-control" id="text"/></div>' +
                '</div>' +
                '<div class="form-group row">' +
                '<div class="col-3"><label for="select" class="col-form-label">Select</label></div>' +
                '<div class="col-9"><select id="select" class="form-control">' +
                '<option value=""></option>' +
                '<option value="red">red</option><option value="green">green</option><option value="blue">blue</option>' +
                '</select></div>' +
                '</div>' +
                '<div class="form-group row">' +
                '<div class="col-3"><label for="textarea" class="col-form-label">Textarea</label></div>' +
                '<div class="col-9"><textarea id="textarea" rows="5" class="form-control"></textarea></div>' +
                '</div></form>',
            footer: '<button type="button" class="btn btn-link" data-dismiss="modal">Cancel</button><button type="submit" class="btn btn-primary">Send</button>',
            onCreate: function (modal) {
                // create event handler for form submit and handle values
                $(modal.element).on("click", "button[type='submit']", function (event) {
                    event.preventDefault()
                    var $form = $(modal.element).find("form")
                    $.showAlert({
                        title: "Result",
                        body:
                            "<b>text:</b> " + $form.find("#text").val() + "<br/>" +
                            "<b>select:</b> " + $form.find("#select").val() + "<br/>" +
                            "<b>textarea:</b> " + $form.find("#textarea").val()
                    })
                    modal.hide()
                })
            }
        })
    })

</script>
</body>
</html>